<template>
	<view class="out-wrapper" :class="{'out-wrapper-transparent': !showoutborder}">
		<view class="primary-btn" hover-class="tap-hover" @click="btn_click" :class="{'disabled-class': disabled}">
		  <image v-if="img" class="icon" :src="img" mode="widthFix"></image>
		  <uni-icons v-if="!img && iconType" :type="iconType" :size="20" color="#fff" style="margin-right: 10rpx;"></uni-icons>
		  <text>{{title}}</text>
		</view>
	</view>
</template>

<script>
  export default {
    props: {
      bgColor: {
        type: String,
        default: 'linear-gradient(30deg,#08C0CC 40%, #4DE2D2, #E7E0FD)'
      },
      title: {
        type: String,
        default: '按钮'
      },
      img: {
        type: String,
        default: ''
      },
      iconType: {
        type: String,
        default: ''
      },
      height: {
        type: String,
        default: '88rpx'
      },
      color: {
        type: String,
        default: '#fff'
      },
      disabled: {
        type: Boolean,
        default: false
      },
			showoutborder: {
				type: Boolean,
				default: true
			}
    },
    emits: ['btnClick'],
    data() {
      return {
        
      }
    },
    methods: {
      btn_click() {
        if (this.disabled) {
          return
        }
        this.$emit('btnClick')
      }
    }
  }
</script>

<style scoped lang="scss">
	.out-wrapper {
		padding: 4rpx;
		border-radius: 50rpx;
		background: linear-gradient(to bottom, #E3FFF2, #9FEFE7);
	}
  .primary-btn {
    height: v-bind(height);
    width: 100%;
    border-radius: 44rpx;
    background: v-bind(bgColor);
    color: v-bind(color);
    font-size: 34rpx;
		font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      width: 32rpx;
      max-height: 60rpx;
      margin-right: 10rpx;
    }
  }
  .disabled-class {
    opacity: 0.2;
  }
	.out-wrapper-transparent{
		background: transparent;
	}
</style>